<template>
  <el-dialog append-to-body title="工序技能" :visible.sync="visible" width="60%" top="5vh" @close="handleClose">
    <avue-crud ref="crud" :data="data" :option="option">
      <template slot="menuLeft">
        <el-button type="primary" size="small" icon="el-icon-plus" @click="handleAdd()">添加技能</el-button>
      </template>
      <template slot-scope="{ index }" slot="menu">
        <el-button icon="el-icon-delete" size="small" type="text" @click="rowDel(index)">删除</el-button>
      </template>
    </avue-crud>
    <div slot="footer" class="dialog-footer close">
      <el-button size="small" type="primary" @click="handleSubmit()"><i class="el-icon-circle-plus-outline"></i><span>提 交</span></el-button>
      <el-button size="small" icon="el-icon-circle-close" @click="handleClose">关 闭</el-button>
    </div>
    <common-modal-template ref="commonModalTemplate" :option="tableOption" @getSelectedRows="getSelectedRows"></common-modal-template>
  </el-dialog>
</template>
<script>
import CommonModalTemplate from '@/components/common-modal-template/common-modal-template.vue';
export default {
  components: {
    CommonModalTemplate
  },
  name: 'skillModal',
  props: ['visible'],
  data() {
    return {
      data: [], //表格数据
      selectedRows: [], //表格选中行数据
      option: {
        height: '500',
        calcHeight: 30,
        border: true, //表格外框线是否显示
        stripe: true, //表格是否显示条纹
        header: true, //表格头部是否显示
        index: true, //表格数据序号
        indexLabel: '序号',
        addBtn: false, //新增按钮是否显示
        editBtn: false,
        delBtn: false,
        menu: true, //表格操作栏是否显示
        refreshBtn: false, //刷新按钮是否显示
        columnBtn: false, //控制表格列是否显示按钮是否显示
        searchBtn: false,
        column: [
          { label: '技能类型', prop: 'skillType' },
          { label: '技能名称', prop: 'skillName' },
          { label: '备注', prop: 'remark' }
        ] //表格列配置
      }, //表格属性
      tableOption: {} //公用模态框配置信息
    };
  },
  methods: {
    handleClose() {
      this.$emit('close', false);
    },

    // 添加技能
    handleAdd() {
      this.$refs.commonModalTemplate.showModal();
      this.tableOption = {
        modalTitle: '选择技能',
        url: '/api/mes-admin/skill/page?status=1',
        isPage: true,
        rowSelectionType: 'multiple',
        columnDefs: [
          {
            label: '技能类型',
            prop: 'type',
            type: 'select',
            dicUrl: '/api/blade-system/dict/dictionary?code=skill_type',
            props: { label: 'dictValue', value: 'dictKey' },
            search: true
          },
          { label: '技能名称', prop: 'name', search: true },
          { label: '备注', prop: 'remark' }
        ]
      };
    },
    getSelectedRows(rowData) {
      for (let i = 0; i < rowData.length; i++) {
        let obj = this._find(this.data, { skillName: rowData[i].name });
        if (!obj) {
          this.data.push({
            skillId: rowData[i].id,
            skillType: rowData[i].type,
            skillName: rowData[i].name,
            remark: rowData[i].remark
          });
        }
      }
    },
    rowDel(index) {
      this.$confirm('确定将选择数据删除?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.data.splice(index, 1);
      });
    },
    handleSubmit() {
      let data = this._map(this.data, (item) => {
        return {
          skillId: item.skillId,
          skillType: item.skillType,
          skillName: item.skillName,
          remark: item.remark
        };
      });
      this.$emit('skillSubmit', data);
      this.handleClose();
    }
  }
};
</script>
